import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import fetch from 'API/fetch';
import RaskSelect from '../../../components/RaskSelect';
import { Spin } from 'antd';
import Label from '../../../components/Label';
import { datetime } from '../../../../common/formatter';
import s from './Content.module.css';
import Trend from './Trend';
import CategoryPie from './CategoryPie';
import CategoryTable from './CategoryTable';
import DetailTable from './DetailTable';

export default function Content({ className, jobId, lastId, prevId }) {
	const [endtime, setendtime] = React.useState('');
	const [detailTaskId, setdetailTaskId] = React.useState('');
	const [statsList, setStatsList] = React.useState([]);
	const [allData, setAllData] = React.useState([]);
	const [dateRask, setDateRask] = React.useState({ detectTime: 'last', detectType: 'last' });
	const [loading, setLoading] = React.useState(false);

	const getdata = async ({
		Type = 'content',
		range = 'range',
		startTime,
		endTime,
	}) => {
		if (!jobId) return false
		setLoading(true);
		let url = `/api/v2/repodatas/report-task?jobId=${jobId}&taskType=${Type}&range=${range}`;
		if (range === 'range') {
			url += `&startTime=${new Date(startTime).toISOString()}
			&endTime=${new Date(endTime).toISOString()}`;
		}
		const res = await fetch(url, {
			method: 'GET',
		}).catch(err => {
			console.log(err);
		}).finally(() => {
			setLoading(false);
		});
		const statsList = res.TaskData || [];
		const endtime = statsList?.[0]?.endTime;
		const detailTaskId = statsList.find(x => x?.result?.stats?.url > 0)?._id;
		setAllData(statsList);
		if (range === 'range') {
			setStatsList(statsList);
		} else {
			setStatsList([statsList[0]]);
		}
		setdetailTaskId(detailTaskId);
		setendtime(endtime);
		setLoading(false);
	};
	const handleDateRask = val => {
		setDateRask(val);
		const obj = {
			range: val.detectTime || 'range',
		};
		if (val.detectTime === 'prev') {
			setStatsList([allData[1]]);
			return false;
		}
		if (obj.range === 'range') {
			obj.startTime = val.dateRange[0];
			obj.endTime = val.dateRange[1];
		}
		if (val.dateRange.length !== 2) {
			obj.range = 'last';
		}
		getdata(obj);
	};
	React.useMemo(() => {
		getdata({ range: 'last' });
	}, []);
	return (
		<Spin spinning={loading}>
			<div className={cn(className, s.content, 'scanv-page-container')}>
				<div className={s.head}>
					<div className={s.title}>
						<Label className={s.label}>内容违规</Label>
						{dateRask?.detectTime && (
							<span className={s.date}>{datetime(endtime)}</span>
						)}
					</div>

					<RaskSelect
						value={dateRask}
						onChange={handleDateRask}
						resultLength={statsList.length || 0}
					/>
				</div>
				<Trend className={s.trend} dateRask={dateRask} stats={allData} />
				<section className={s.row}>
					<CategoryPie
						className={cn(s.categoryPie, s.flex2)}
						stats={statsList}
					/>
					<CategoryTable
						className={cn(s.categoryPie, s.flex3)}
						stats={statsList}
					/>
				</section>
				<DetailTable
					key={detailTaskId}
					taskId={detailTaskId}
					stats={statsList}
				/>
			</div>
		</Spin>
	);
}

Content.propTypes = {
	className: PropTypes.string,
	jobId: PropTypes.string,
	lastId: PropTypes.string,
	prevId: PropTypes.string,
};

Content.defaultProps = {
	className: s.content,
	jobId: '',
	lastId: '',
	prevId: '',
};
